<template>
  <div class="container main-fade-in">
    <div class="content-wrapper">
      <div class="add-city city-card-glass">
        <div class="a1">
          <div class="addleft">
            <h3>{{ cityName }}</h3>
            <span>{{ currentWeather.temperature }}℃</span>
          </div>
          <div class="addright">
            <span class="x">{{ currentWeather.weather }}</span>
            <span class="x">{{ currentWeather.winddirection }}</span>
            <span class="x">{{ currentWeather.windpower }}级</span>
          </div>
        </div>
      </div>
      <h2>近期天气</h2>
      <div class="forecast-section fade-in">
        <div class="forecast-cards">
          <transition-group name="forecast-fade" tag="div" class="forecast-list">
            <div 
              class="forecast-card card-glass"
              v-for="(cast, index) in forecasts"
              :key="index"
            >
              <span class="day">{{ formatDay(index, cast.week) }}</span>
              <span class="date">{{ formatDate(cast.date) }}</span>
              <span class="weather-type">{{ cast.dayweather }}</span>
              <span class="wind">风力 {{ cast.daypower }}级</span>
            </div>
          </transition-group>
        </div>
        <div class="temperature-chart fade-in">
          <v-chart class="chart" :option="option" autoresize />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getWeather, getWeatherForecast } from '../api/weatherApi'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'

use([CanvasRenderer, LineChart, GridComponent])

const route = useRoute()
const cityName = ref('')
const currentWeather = ref({})
const forecasts = ref([])

// 图表配置
const option = ref({
  grid: {
    left: '5%',
    right: '5%',
    top: '15%',
    bottom: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    show: false,
  },
  yAxis: {
    type: 'value',
    show: false,
    min: function (value) {
      return Math.floor(value.min * 0.6)
    },
    max: function (value) {
      return Math.ceil(value.max * 1)
    }
  },
  series: [
    {
      name: '白天',
      type: 'line',
      data: [],
      symbolSize: 12,
      symbol: 'circle',
      smooth: true,
      lineStyle: { 
        width: 3, 
        color: '#7EB3FF' 
      },
      itemStyle: { 
        color: '#7EB3FF', 
        borderWidth: 2, 
        borderColor: '#fff' 
      },
      label: {
        show: true,
        position: 'top',
        formatter: '白{c}°C',
        color: '#FFFFFF',
        fontSize: 12,
        padding: [2, 4],
        distance: 4
      }
    },
    {
      name: '夜间',
      type: 'line',
      data: [],
      symbolSize: 12,
      symbol: 'circle',
      smooth: true,
      lineStyle: { 
        width: 3, 
        color: '#A7E25F' 
      },
      itemStyle: { 
        color: '#A7E25F', 
        borderWidth: 2, 
        borderColor: '#fff' 
      },
      label: {
        show: true,
        position: 'bottom',
        formatter: '晚{c}°C',
        color: '#FFFFFF',
        fontSize: 12,
        padding: [2, 4],
        distance: 4
      }
    }
  ]
})

// 日期格式化
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 星期格式化
const formatDay = (index, week) => {
  const weekMap = ['日', '一', '二', '三', '四', '五', '六']
  // 前两日特殊处理
  if (index === 0) return '今天';
  if (index === 1) return '明天';
  
  return `周${weekMap[week % 7] || ''}`;
  
}

// 获取天气数据
onMounted(async () => {
  try {
    const adcode = route.params.adcode
    
    // 获取实时天气
    const liveData = await getWeather(adcode)
    if (liveData) {
      currentWeather.value = liveData
      cityName.value = liveData.city
    }

    // 获取天气预报
    const forecastRes = await getWeatherForecast(adcode)
    if (forecastRes?.casts) {
      // 处理每个预报项目的week数据
      forecasts.value = forecastRes.casts.slice(0, 4).map(cast => ({
        ...cast,
        // 确保week是有效的，API可能返回1-7的数字或"星期x"格式
        week: cast.week || String(new Date(cast.date).getDay())
      }))
      
      // 更新图表配置
      option.value = {
        ...option.value,
        xAxis: {
          ...option.value.xAxis,
          data: forecasts.value.map((cast, index) => formatDay(index, cast.week))
        },
        series: [
          {
            ...option.value.series[0],
            data: forecasts.value.map(c => parseInt(c.daytemp))
          },
          {
            ...option.value.series[1],
            data: forecasts.value.map(c => parseInt(c.nighttemp))
          }
        ]
      }
    }
  } catch (error) {
    console.error('数据加载失败:', error)
  }
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  border-radius: 24px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  backdrop-filter: blur(8px);
  background: rgba(0, 102, 138, 0.25);
  animation: fadeInUp 1s cubic-bezier(0.4,0,0.2,1);
  .content-wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .add-city {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 260px;
    max-width: 600px;
    margin: 2rem auto 0 auto;
    border-radius: 16px;
    box-shadow: 0 4px 24px 0 rgba(31, 38, 135, 0.18);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    opacity: 1;
    transition: box-shadow 0.3s, transform 0.3s;
    &.city-card-glass {
      transition: box-shadow 0.3s, transform 0.3s;
      &:hover {
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.28);
        transform: scale(1.03) translateY(-2px);
        background: rgba(255,255,255,0.15);
      }
    }
    .a1{
      height: 44px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .addleft{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 0.75rem 1rem;
        width: 100%;
        background-color: transparent;
        h3 {
          margin: 0;
          font-size: 1.1rem;
          font-weight: 500;
          word-break: break-all;
          max-width: 180px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span {
          font-size: 1rem;
          word-break: break-all;
        }
      }
      .addright {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 0.75rem 1rem;
        .x {
          font-size: 1rem;
          word-break: break-all;
        }
      }
    }
  }
  h2 {
    margin: 2.5rem 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .forecast-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
    .forecast-cards {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      background-color: transparent;
      border-radius: 8px 8px 0 0;
      padding: 1.5rem 1.5rem 0 1.5rem;
      .forecast-list {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        justify-content: space-between;
      }
      .forecast-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        min-width: 100px;
        max-width: 160px;
        padding: 0rem;
        gap: 1rem;
        text-align: center;
        height: 150px;
        border-radius: 12px;
        background: rgba(255,255,255,0.13);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
        &.card-glass {
          opacity: 1;
        }
      }
    }
    .temperature-chart {
      position: relative;
      width: 100%;
      max-width: 700px;
      height: 300px;
      padding: 1.5rem;
      margin: 2.5rem auto 2rem auto;
      background-color: transparent;
      padding: 1.5rem 1.5rem 0 1.5rem;
      border-radius: 0 0 16px 16px;
      .chart {
        position: absolute;
        left: 0;
        top: 0;
        width: 90%;
        height: 100%;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        padding: 1.5rem; 
        margin-left: 40px;
        border-width: 0;
      }
    }
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in {
  animation: fadeInUp 1s cubic-bezier(0.4,0,0.2,1);
}
.forecast-fade-enter-active, .forecast-fade-leave-active {
  transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
}
.forecast-fade-enter-from, .forecast-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
